<template>
    <ul class="list">
         <!-- <li class="item" 
        v-for="(item,key) of cities"
        :key="key"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
        @click="handleLetterClick"  
          >{{key}}</li> 改为-->
        <li class="item" 
        v-for="item of letters"
        :key="item"
        :ref="item"
        @touchstart.prevent="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
        @click="handleLetterClick"  
          >{{item}}</li>
          <!--在子组件绑定一个click事件,实现点击右边字母，左边自定滚到指定字母区域
           绑定一个touchstart事件，实现右边字母的拖拽，使得左边滚动到指定区域-->
    </ul>
</template>
<script>
export default {
    name: "cityAlphabet",
    props:{
        cities:Object
    },
    data () {
      return{
          touchStart:false,//定义一个标识，判断什么时候触发handleTouchMove方法
          startY : 0,
          timer : null
      }
    },
    updated () {
    this.startY = this.$refs['A'][0].offsetTop//页面刚开始初始化时cities为一个空数组，当页面渲染之后cites数据更新（此时有值了），当cities更新页面渲染之后，此时页面就会出现字母表了，则生命周期钩子update计算startY
    },
    computed: {
       letters () {
           const letters = []//定义一个空数组
          for(let i  in  this.cities){//循环cities对象
           letters.push(i)
          }
          return letters//['A',[B],[c]],因此页面可循环letters
       }
    },
    methods:{
        handleLetterClick(e){//在methods这里定义该事件
         this.$emit('change',e.target.innerText)//向外触发change事件，并且将点击的元素值也向父组件传
        },
        handleTouchStart () {//手指刚触摸时
         this.touchStart=true
        },
        handleTouchMove (e) {//滑动时
         if(this.touchStart){//当手指触摸时，执行handleTouchMove
         if(this.timer){
          clearTimeout(this.timer)
         }//通过这种函数节流的方式，我们可以大大的节约handleTouchMove的执行频率
         this.timer =setTimeout(() => {//如果正在做以下事情时，则延迟16毫秒之后再去执行，假设在16毫秒之间，你又做了手指的滚动，则他会把上一次的操作给清除掉，重新执行你这一次的操作。
         //const startY = this.$refs['A'][0].offsetTop//字母顶部距离该区域顶部的距离,性能优化：这段改到update钩子函数里
         const touchY = e.touches[0].clientY - 79//79为header区域的高度，e.touches[0].clientY为手指触摸的位置到header的顶部高度
         const index = Math.floor((touchY-this.startY)/20)//20为字母的高度
         if(index >= 0 && index < this.letters.length){
          this.$emit('change',this.letters[index])
         }
         },16)
    
         
         }
        },
        handleTouchEnd () {//离开
         this.touchStart=false
        }

    }
};
</script>
<style lang="stylus" scoped>
@import '~styles/variable.styl'
 .list
   position absolute
   right 0
   top 1.58rem
   bottom 0
   width .4rem
   display flex
   flex-direction column
   justify-content center
   .item 
    line-height .4rem
    text-align center
    color $bgcolor
</style>
